<template>
	<view class="add-member">
		<view class="rest flex-between">
			<view style="color: #999;">需要选择<text class="value">{{limit - selectLength}}</text> 名队员
			</view>
			<view class="flex-align" style="color: #2F75FA;" @click="add">
				添加
				<u-icon name="plus-circle" color="#2F75FA"></u-icon>
			</view>
		</view>

		<u-checkbox-group v-model="checked" shape="circle" v-if="list.length" @change="checkbox_so">
			<view class="list">
				<view v-for="(item,index) in list" :key="index" class="item flex-between">
					<view class="flex-align">
						<!-- <view class="flex-align" v-for="item in list"
					:key="item.id"> -->
						<u-checkbox :name="item.id" :checked="item.checked" :disabled="item.disabled" @change="checkboxed( item,index)" />
						<view style="margin: 0 23rpx;">
							<u-avatar :src="item.avatar" size="100rpx"></u-avatar>
						</view>
						<view>
							<view class="flex-align">
								<view>{{ item.name }}</view>
								<view class="tag" v-if="item.leader">
									<u-tag text="队长" bgColor="#2F75FA" borderColor="rgba(0,0,0,0)" size="mini"></u-tag>
								</view>
								<view class="tag">
									<u-tag :text="item.position" bgColor="rgba(236, 70, 246, 0.2)"
										borderColor="rgba(0,0,0,0)" color="#EC46F6" size="mini"></u-tag>
								</view>
							</view>
							<view class="phone">
								{{ item.phone }}
							</view>
						</view>
					</view>

					<view class="flex-align">
						<view style="margin-right: 37rpx;">
							<u-image :src="`${assetsPath}65252cc3cabb58c38fcd11e8696716f087cde0a6.png`" width="28rpx"
								height="28rpx" @click="bfEdit(item)"></u-image>
						</view>
						<u-image :src="`${assetsPath}9d74b44b23ca5567b4e3df5cebfce86aa3b3277c.png`" width="28rpx"
							height="28rpx" @click="bfDel(item)"></u-image>
					</view>
					<!-- 	<image style="width: 30rpx; height: 30rpx;margin-left: 50%;" :src="bianji" mode=""
						@click="bfEdit(item1)"></image>
					<image style="width: 30rpx; height: 30rpx;margin-left: 10%;" :src="shanchu" mode=""
						@click="bfDel(item1)"></image> -->
				</view>
			</view>
		</u-checkbox-group>

		<u-empty v-else :icon="`${assetsPath}15ee183896ac4578c2c37c556b178a1ad00fec6a.png`" text="暂无队员~"
			marginTop="80rpx"></u-empty>
		<view class="bottom-add-btn" v-if="limit==selectLength">
			<u-button text="确定" shape="circle" @click="confirm" :disabled="disabled"
				color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 100%)"></u-button>
		</view>
		<view class="bottom-add-btn" v-else>
			<u-button text="确定" @click="congif" shape="circle" :disabled="disabled"
				color="linear-gradient(0deg, rgb(204, 204, 204) 0%, rgb(193, 193, 193) 100%)"></u-button>
		</view>
	</view>
</template>

<script>
	// import { getCurrentPath } from '@/utils/util.js';
	const venues = require("@/api/venues/venues.js");
	export default {
		props: {
			// list: {
			// 	type: Array,
			// 	default: () => []
			// },
			// member_idlist: {
			// 	type: String ,
			// },
			

		},
		data() {
			return {
				assetsPath: this.$https.assetsPath,
				// checked: [],
				list: [],
				race_id: '',
				team_id: '',
				image: [],
				img: [],
				choosenum: '',
				limit: '',
				selectLength: 0,
				member_list:'',
				member_ids:''
			}
		},
		computed: {
			// disabled() {
			// 	return this.checked.length === 0
			// }
			checked: {
				get() {
					return this.value;
				},
				set(val) {
					this.$emit('input', val);
				}
			}
		},
		onLoad(options) {
			console.log(options,'123')
			this.race_id = options.race_id
			this.team_id = options.team_id
			this.member_list = options.member_ids
			this.selectLength = options.length
			this.getMemberList()
		},
		onShow() {
			this.getMemberList()
		},
		methods: {
			checkbox_so(e) {
				var e = e.toString()
				this.member_ids = e
			},
			checkboxed(item, index) {
				this.image.push(item.avatar)
				var w = this.image.toString()
				this.img = w
				item.checked = !item.checked
				this.selectLength = this.list.filter(item => item.checked).length || 0
				if (this.selectLength >= this.limit) {
					this.list.forEach((el, idx) => {
						if (idx == index) {
							el.disabled = false

						} else {
							if (el.checked) {

							} else {
								el.disabled = true
							}
						}
					})
				} else {
					this.list.forEach((el, idx) => {
						el.disabled = false
					})
				}

			},
			// 获取学员资料
			async getMemberList() {
				let params = {
					open_id: uni.getStorageSync("openid"),
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					race_id: this.race_id,
					member_ids:this.member_list
				}
				let res = await venues.getMemberList(params)
				if (res.code == 1) {
					this.list = res.data.result.itemArr
					this.choosenum = res.data.num
					this.limit = res.data.limit
					let itemArrs = []
					let itemArr = res.data.result.itemArr
					itemArr.forEach(item => {
						var obj = {
							checked: false
						}
						itemArrs.push(obj)
					})

				}
			},
			add() {
				uni.navigateTo({
					url: '/page_venues/pages/member-info/add/add',
				});
			},
			async confirm() {
				let params = {
					avatar: this.img,
					race_id: this.race_id,
					member_ids: this.member_ids,
					team_id: this.team_id,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
				}
				let res = await venues.chosenMember(params)
				if (res.code == 1) {
					uni.navigateBack();

				}

			},
			congif() {
				uni.showToast({
					title: '报名人员不足',
					icon: 'error',
					duration: 850
				});

			},
			bfEdit(item) {
				// uni.navigateTo({
				// 	url: '/page_venues/pages/member-info/add/add?id=' + item1.id
				// });
				uni.navigateTo({
					url: '/page_venues/pages/member-info/add/add?item1=' + encodeURIComponent(JSON.stringify(item))
				});
			},
			bfDel(item) {
				let that = this
				uni.showModal({
					title: '删除',
					content: '是否确定删除！',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							let params = {
								project_id: getApp().globalData.projectId,
								app_id: that.$https.weixinAppId,
								open_id: uni.getStorageSync("openid"),
								id: item.id,
							}
							venues.delMember(params).then(res => {
								if (res.code == 1) {
									that.getMemberList()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
		}
	}
</script>

<style lang="scss" scoped>
	.add-member {
		padding-bottom: calc(130rpx + env(safe-area-inset-bottom));

		.rest {
			padding: 30rpx;
			background: #F3F3F3;
			font-size: 24rpx;

			.value {
				color: #2F75FA;
				font-size: 28rpx;
			}
		}

		.list {
			width: 100%;

			.item {
				padding: 20rpx 30rpx;

				.tag {
					margin-left: 10rpx;
				}

				.phone {
					color: #BEBEBE;
					font-size: 26rpx;
					margin-top: 13rpx;
				}
			}
		}
	}
</style>
